<template>
  <div class="market-container">
    <div class="header">关于名扬云</div>
    <div class="info">
      <div class="left">
        <div class="title">名扬云简介</div>
        <div class="content">
          7月31日,一年一度的玩家盛会ChinaJoy在上海新国际博览中心如期举办。今年展会的主题是"科技·引领数字娱乐新浪潮",联想作为全球PC领导企业参展商出席了此次盛会,携全球首款5G笔记本、全新拯救者系列PC以及刚发布的联想拯救者电竞手机Pro亮相ChinaJoy现常值得注意的是,为了让更多人体验到现场的盛况,8月1日,联想拯救者将以云逛ChinaJoy的直播形式与大家见面。
          <br />
          <br />
          作为国内的首款5G笔记本的联想YOGA5G亮相ChinaJoy,而这也是这款笔记本电脑第一次在国内公开亮相。这款笔记本电脑搭载高通骁龙8cx5G计算平台,而该平台也是全球首个专为PC提供5G连接而打造的7nm平台,为高速5G网络提供硬件保证。在5G网络的前提下,联想YOGA5G的下载速度可达到现有4G网络的10倍,而且同样支持实时在线、即时响应，这一点智能手机相同。
        </div>
        <div class="feature">
          <div
            class="feature-item"
            v-for="item in featureItems"
            :key="item.imgSrc"
          >
            <img :src="item.imgSrc" alt="" />
            <div class="text">{{ item.text }}</div>
          </div>
        </div>
      </div>
      <div class="right">
        <img src="@/assets/market/info.png" alt="" />
      </div>
    </div>
    <div class="market-item-type1 market-item">
      <div class="market-item-left">
        <div class="market-item-title">标题标题</div>
        <div class="market-item-txt">
          这是一段描述这是一段描述这是一段描述这是一段描述这是一段描述，这是一段描述这是一段描述这是一段描述这是一段描述这是一段描述
          <br />
          <br />
          这是一段描述这是一段描述这是一段描述这是一段描述这是一段描述，这是一段描述这是一段描述这是一段描述这是一段描述这是一段描述
        </div>
      </div>
      <div class="market-item-right">
        <img src="@/assets/market/test.png" alt="" />
      </div>
    </div>
    <div class="market-item-type2 market-item">
      <div class="market-item-left">
        <img src="@/assets/market/background.png" alt="" />
      </div>
      <div class="market-item-right">
        <div class="market-item-title">标题标题</div>
        <div class="market-item-txt">
          这是一段描述这是一段描述这是一段描述这是一段描述这是一段描述，这是一段描述这是一段描述这是一段描述这是一段描述这是一段描述
          <br />
          <br />
          这是一段描述这是一段描述这是一段描述这是一段描述这是一段描述，这是一段描述这是一段描述这是一段描述这是一段描述这是一段描述
        </div>
      </div>
    </div>
    <div class="contact">
      <div class="contact-header">
        <div class="title">联系方式</div>
        <div class="eng">Contact Us</div>
      </div>
      <div class="contact-content">
        <div
          class="contact-content-item"
          v-for="item in contactItems"
          :key="item.imgSrc"
        >
          <div class="left">
            <img :src="item.imgSrc" alt="" />
          </div>
          <div class="right">
            <div class="text">
              {{ item.text }}
            </div>
            <div class="desc">
              {{ item.desc }}
            </div>
          </div>
        </div>
      </div>
      <div class="map">
        <img src="@/assets/market/map.png" alt="" />
      </div>
    </div>
    <!-- 开始使用名扬云 -->
    <div class="start-container">
      <div class="title">开始使用名扬云服务</div>
      <RouterLink :to="{ name: 'Login' }">
        <div class="login">登录</div>
      </RouterLink>
    </div>
    <!-- 关于公司 -->
    <div class="about-container">
      <div class="about-item" v-for="item in aboutItems" :key="item.imgSrc">
        <div class="logo">
          <img :src="item.imgSrc" alt="" />
        </div>
        <div class="title">
          {{ item.title }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      aboutItems: [
        {
          imgSrc: require("@/assets/index/about/anytime.png"),
          title: "7×24小时服务支持",
        },
        {
          imgSrc: require("@/assets/index/about/price.png"),
          title: "价格公开透明",
        },
        {
          imgSrc: require("@/assets/index/about/count.png"),
          title: "灵活计费",
        },
        {
          imgSrc: require("@/assets/index/about/serve.png"),
          title: "专属客服服务",
        },
      ],
      featureItems: [
        {
          imgSrc: require("@/assets/market/feature.png"),
          text: "特征特征",
        },
        {
          imgSrc: require("@/assets/market/feature.png"),
          text: "特征特征",
        },
        {
          imgSrc: require("@/assets/market/feature.png"),
          text: "特征特征",
        },
        {
          imgSrc: require("@/assets/market/feature.png"),
          text: "特征特征",
        },
      ],
      contactItems: [
        {
          imgSrc: require("@/assets/market/address.png"),
          text: "公司地址",
          desc: "广州市越秀区中山一路51号拓业大厦后座638",
        },
        {
          imgSrc: require("@/assets/market/tel.png"),
          text: "联系电话",
          desc: "020-29887388",
        },
        {
          imgSrc: require("@/assets/market/mail.png"),
          text: "电子邮箱",
          desc: "info@mion.cn",
        },
      ],
    };
  },
};
</script>

<style scoped lang="less">
@import "~@/styles/var.less";
.market-container {
  .header {
    height: 400px;
    line-height: 400px;
    text-align: center;
    background: url(~@/assets/market/background.png);
    background-size: 100% 100%;
    color: #fff;
    font-size: 64px;
  }
  .info {
    color: #333333;
    height: 680px;
    display: flex;
    padding: 64px 350px;
    justify-content: space-between;
    box-sizing: border-box;
    .left {
      display: flex;
      flex-direction: column;
      justify-content: space-start;
      padding-bottom: 90px;
      box-sizing: border-box;
      padding-top: 4px;
      .title {
        font-size: 36px;
        margin-bottom: 30px;
      }
      .content {
        width: 522px;
        font-size: 14px;
      }
      .feature {
        width: 546px;
        height: 134px;
        box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.12);
        border-radius: 12px;
        margin-top: 32px;
        display: flex;
        column-gap: 76px;
        box-sizing: border-box;
        padding: 28px 47px;
        .feature-item {
          display: flex;
          flex-direction: column;
          row-gap: 10px;
          width: 56px;
          align-items: center;
          img {
            width: 48px;
            height: 48px;
          }
          .text {
            font-size: 14px;
            white-space: nowrap;
          }
        }
      }
    }
    .right {
      width: 650px;
      height: 552px;
      img {
        object-fit: cover;
      }
    }
  }
  .market-item {
    height: 444px;
    background: #f7fbff;
    display: flex;
    box-sizing: border-box;
    .market-item-title {
      font-size: 36px;
      color: #333;
      margin-bottom: 24px;
    }
    .market-item-txt {
      font-size: 14px;
      color: #666;
    }
    .market-item-left {
      box-sizing: border-box;
      width: 50%;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .market-item-right {
      box-sizing: border-box;
      width: 50%;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  .market-item-type1 {
    .market-item-left {
      padding-top: 101px;
      padding-left: 360px;
      padding-right: 48px;
    }
  }
  .market-item-type2 {
    .market-item-right {
      padding-top: 101px;
      padding-left: 48px;
      padding-right: 360px;
    }
  }
  .contact {
    height: 852px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    align-items: center;
    padding: 64px 0;
    .contact-header {
      .title {
        font-size: 36px;
        margin-bottom: 16px;
      }
      .eng {
        font-size: 18px;
        position: relative;
        left: 25px;
      }
    }
    .contact-content {
      box-sizing: border-box;
      display: flex;
      width: 1200px;
      justify-content: space-between;
      .contact-content-item {
        width: 384px;
        height: 160px;
        display: flex;
        column-gap: 16px;
        border-bottom: 1px solid #dddddd;
        .left {
          margin-top: 36px;
          img {
            width: 88px;
            height: 88px;
          }
        }
        .right {
          margin-top: 48px;
          display: flex;
          flex-direction: column;
          row-gap: 11px;
          .text {
            font-size: 20px;
            color: #666;
          }
          .desc {
            width: 180px;
          }
        }
      }
    }
    .map {
      margin-top: 36px;
      width: 1200px;
      height: 400px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }
  // 开始使用名扬云
  .start-container {
    width: 100%;
    height: 240px;
    background: url("~@/assets/index/start.png");
    display: flex;
    flex-direction: column;
    row-gap: 24px;
    align-items: center;
    justify-content: center;
    .title {
      font-size: 32px;
      color: #fff;
    }
    .login {
      width: 220px;
      height: 48px;
      background-color: #fff;
      color: @primary;
      line-height: 48px;
      text-align: center;
      border-radius: 6px;
    }
  }
  // 关于公司
  .about-container {
    background-color: #303030;
    color: #fff;
    padding: 56px 420px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    .about-item {
      display: flex;
      column-gap: 16px;
      align-items: center;
      .logo {
        width: 48px;
        height: 48px;
      }
    }
  }
}
</style>